<template>
  <div>
    <el-form-item
      :label="labelRuleValue.title"
      :prop="propValue"
      :rules="
        requirsd(labelRuleValue.type)
          ? [
              {
                required: labelRuleValue.rule == 'required' ? true : false,
                message: labelRuleValue.title + $t('common.common33'),
                trigger: ['blur', 'change'],
              },
            ]
          : null
      "
    >
      <!-- 不能为空 -->
      <!-- 下载模板 -->
      <el-upload
        name="file"
        :action="$store.state.api.fileUploadApi"
        :headers="uploadHeader"
        :before-upload="beforeAvatarUpload"
        :on-success="handleSuccess"
        :show-file-list="false"
        :disabled="disabledValue"
        :accept="uploadType"
        style="width: 500px; display: inline"
      >
        <!-- 点击上传 -->
        <el-button size="small" type="primary" :disabled="disabledValue">{{
          $t("common.common34")
        }}</el-button>
      </el-upload>
      <el-link
        :underline="false"
        :href="value"
        :disabled="!value ? true : false"
        type="primary"
        target="_blank"
        rel="noopener noreferrer"
        >{{ isNaN(hrefTitle) ? hrefTitle : "" }}</el-link
      >
    </el-form-item>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";

export default {
  props: {
    hrefTitle: {
      type: String, //文件名
      default: "",
    },
    value: {
      type: String, //对应值
      default: "",
    },
    propValue: {
      type: String,
      default: "",
    },
    labelRuleValue: {
      type: Object,
      default: function () {
        return {};
      },
    },
    disabledValue: {
      type: Boolean,
      default: false,
    },
    uploadType: {
      //上传文件类型 pdf xlsx
      type: String,
      default: "",
    },
    FormName: {  //Form 表单名
      type: String,
      default: "",
    },
  },
  data() {
    return {
      uploadHeader: {
        Authorization: "Bearer " + getToken(),
        "Accept-Language":
          this.$store.state.settings.language == "en-US"
            ? "en"
            : this.$store.state.settings.language == "zh-TW"
            ? "zh-HK"
            : this.$store.state.settings.language,
      },
    };
  },
  computed: {
    ...mapGetters(["fileUploadApi"]),
  },
  methods: {
    beforeAvatarUpload(file) {
      const arr = file.name.split(".");
      const fileName = arr[arr.length-1];
      // console.log(fileName,this.uploadType.substr(1),'11')
      if (this.uploadType.indexOf(fileName.toUpperCase()) == -1) {
        this.$message.error(this.$t("vip.vip21") + this.uploadType + this.$t("vip.vip22"));
        return false;
      } else if (file.size > 1024 * 1024 * 200) {
        //大于200兆文件 不能上传   文件需小于200兆
        this.$message.error(this.$t("vip.vip16"));
        return false;
      } else {
        return true;
      }
      // return isXLSX;
    },
    handleSuccess(response) {
      if (response.code === 10000) {
        this.$emit("update:value", response.data.url);
        this.$emit("update:hrefTitle", response.data.name);
        this.$emit("getFileVail", this.propValue,this.FormName);
        this.$message.success(response.message);
      } else {
        this.$message.error(response.message);
      }
    },
    requirsd(type) {
      return !["array", "json"].includes(type);
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-form-item__content {
  .el-link {
    position: relative;
    left: 10%;
  }
}
</style>